<template>
  <div class="home-commet" :key="timer">
    <!-- 头部导航 -->
    <header>
      <!-- 导航 -->
      <div class="hd-left">
        <i @click="goBack" class="iconfont icon-xiangzuo1"></i>
        <p>
          由 <span>{{ newObj.author }}</span> 发布
        </p>
      </div>
      <div class="hd-right">
        <i class="iconfont icon-24gf-ellipsisVertical"></i>
      </div>
    </header>
    <!-- 内容区 -->
    <div class="com-list">
      <div class="banner">
        <img :src="`${newObj.cover}`" alt="无" />
      </div>
      <div class="com-content">
        <div class="txt">
          <p>{{ newObj.content }}</p>
        </div>
        <div class="title">
          <p>{{ newObj.workFrom }}</p>
        </div>
        <div class="small-btn">
          <ul>
            <li>
              <router-link to="#">
                <i class="iconfont icon-dianzan"></i>
                <span>9.8W</span>
              </router-link>
            </li>
            <li>
              <router-link to="#">
                <i class="iconfont icon-duihuaxinxi"></i>
                <span>100</span>
              </router-link>
            </li>
            <li>
              <router-link to="#">
                <i class="iconfont icon-shoucang"></i>
                <span>收藏</span>
              </router-link>
            </li>
            <li>
              <router-link to="#">
                <i class="iconfont icon-fenxiang"></i>
                <span>分享</span>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 相关标签 -->
    <div class="com-tag">
      <div class="tag-nav">
        <p class="tag-nav-1">相关标签</p>
        <div class="tag-right">
          <p class="tag-nav-2">为标签投票</p>
          <i class="iconfont icon-xiangyou1"></i>
        </div>
      </div>
      <ul>
        <li v-for="(item, index) in newObj.tags" v-bind:key="index">
          {{ item }}
        </li>
      </ul>
    </div>
    <!-- 相关专辑 -->
    <div class="com-album">
      <div class="album-nav">
        <p>相关专辑</p>
      </div>
      <div class="album-pic">
        <ul>
          <li v-for="(el, i) in newObj.album" v-bind:key="i">
            <img :src="`${el.cover}`" alt="" />
            <p>{{ el.name }}</p>
          </li>
          <!-- <li>
            <img :src="`${newObj.album[0].cover}`" alt="" />
            <p>{{newObj.album[0].name}}</p>
          </li> -->
        </ul>
      </div>
    </div>
    <!-- 推荐句子 -->
    <div class="com-sentence">
      <div class="sentence-nav">
        <p class="sentence-nav-1">推荐句子</p>
      </div>
      <div class="sentence-case">
        <p class="sentence-nav-2">
          {{ this.hotArr[0].data }}
        </p>
        <p class="sentence-nav-2">
          {{ this.hotArr[1].data }}
        </p>
      </div>
    </div>
    <!-- 评论区 -->
    <div class="com-discuss">
      <div class="discuss-nav">
        <p class="discuss-nav-1">评论</p>
      </div>
      <!-- 用户评论 -->
      <ul>
        <!-- 个人评论 -->
        <li
          class="discuss-user clearfix"
          v-for="(item, index) in publishData"
          v-bind:key="item.id"
        >
          <div class="user-pic">
            <img src="../assets/imgs/13.jpeg" alt="" />
          </div>
          <div class="user-content clearfix">
            <p>@muYun</p>
            <div class="cont-data clearfix">
              <span class="data">{{ item.time }}</span>
              <div class="data-right">
                <span class="num">0</span>
                <i class="iconfont icon-dianzan"></i>
              </div>
            </div>
            <div class="cont-txt">
              <p>
                {{ item.txt }}
              </p>
            </div>
          </div>
        </li>
        <li
          class="discuss-user clearfix"
          v-for="(el, i) in userData"
          v-bind:key="i"
        >
          <div class="user-pic">
            <img :src="`${el.cover}`" alt="" />
          </div>
          <div class="user-content clearfix">
            <p>{{ el.name }}</p>
            <div class="cont-data clearfix">
              <span class="data">{{ dayTimer[i] }}</span>
              <div class="data-right">
                <span class="num">{{ el.good }}</span>
                <i class="iconfont icon-dianzan"></i>
              </div>
            </div>
            <div class="cont-txt">
              <p>
                {{ el.content }}
              </p>
            </div>
          </div>
        </li>
      </ul>
      <!-- 没有更多啦··· -->
      <p class="notxt">没有更多啦···</p>
    </div>
    <!-- 底部发表评论 -->
    <div class="com-answer">
      <input type="text" v-model="v1" placeholder="写评论。。。" />
      <span @click="goPublish">发表</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "homeComment",
  data() {
    //数据
    return {
      obj: {},
      id: [],
      newObj: {},
      hotArr: [], //推荐句子
      dayTimer: [], //评论时间
      userData: {}, //用户评论
      v1: "", //我的评论
      publishData: [],
      timer: "",
    };
  },
  methods: {
    //方法
    geData() {
      let pro = axios.get("./data.json");
      pro
        .then((res) => {
          this.obj = res.data.data.list;
          // 请求成功就调用
          this.checkData();
        })
        .catch((err) => {
          console.log(err);
        });

      // 推荐句子数据
      for (let i = 0; i < 2; i++) {
        let hotSentence1 = axios.get("https://api.vvhan.com/api/ian");
        hotSentence1.then((hotres1) => {
          // console.log(hotres1);
          this.hotArr.push(hotres1);
          // console.log(this.hotArr);
        });
      }
    },
    // 循环数据，判断
    checkData() {
      //  console.log('test');
      for (let i = 0; i < this.obj.length; i++) {
        // console.log('所有uuid',this.obj[i].uuid);
        // console.log('专辑',this.obj[i].album);

        if (this.obj[i].uuid == this.id) {
          this.newObj = this.obj[i];
          // console.log('相等',this.newObj);
          // console.log("专辑===>", this.newObj.album);
          // console.log("评论===>", this.newObj.usercomment);
          this.userData = this.newObj.usercomment;

          let time = this.newObj.usercomment;
          for (let j = 0; j < time.length; j++) {
            // console.log(time[j].created_time);
            // 调用方法
            this.toData(time[j].created_time);
          }
          // console.log('所有的时间===>',time);
          // this.toData(time);
          // console.log("时间===>", this.dayTimer);
          // console.log(new Date(time));
          // return (this.newObj = this.obj[i]);
        }
      }
      //  console.log('唯一id',this.id.id);
    },
    // 把时间戳转换为正常时间
    toData(k) {
      let toTime = new Date(k);
      let y = toTime.getFullYear();
      let M = toTime.getMonth() + 1;
      let d = toTime.getDay();
      let h = toTime.getHours();
      let m = toTime.getMinutes();
      // 补零
      M = this.addZero(M);
      d = this.addZero(d);
      h = this.addZero(h);
      m = this.addZero(m);
      return this.dayTimer.push(y + "-" + M + "-" + d + " " + h + ":" + m);
    },
    // 补零
    addZero(n) {
      if (n < 10) {
        return (n = "0" + n);
      }
      return n;
    },
    // 返回上一级
    goBack() {
      this.$router.go(-1);
    },
    goPublish() {
      //取值
      this.publishData = JSON.parse(sessionStorage.getItem("pubData")) || [];
      
      let objData = {};
      objData.txt =  this.v1;
      objData.time = this.dayTimer.slice(-1)[0];
      objData.id = new Date().getTime();
      this.publishData.push(objData)

       this.timer = new Date().getTime();
      // this.timer = new Date().getTime();

      // 转时间
     
      this.toData(this.timer);
      // this.v1 = null;

      // console.log(this.dayTimer.slice(-1)[0]);
      // this.publishData.conTimer = this.dayTimer.slice(-1)[0];
      // console.log('当前评论的时间===>',this.publishData.conTimer);


      //  // 存值
      sessionStorage.setItem("pubData", JSON.stringify(this.publishData));
      // // //  取值
      // this.publishData = JSON.parse(sessionStorage.getItem("pubData"));
      console.log('取值====>',this.publishData);
    },
  },
  mounted() {
    //钩子
    this.geData();

    // console.log(this.$route.query.id);
    // this.id = this.$route.query.id;
    this.id.push(this.$route.query.id);
    // console.log(this.id);
    // console.log("所有时间====>", this.dayTimer);
  },
};
</script>

<style lang="scss" scoped>
.home-commet {
  background: #f8f8f8;
}
header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  width: 100%;
  height: 46px;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
  .hd-left {
    i {
      font-size: 35px;
      color: #2f2f2f;
      vertical-align: middle;
    }
    p {
      display: inline-block;
      height: 46px;
      line-height: 46px;
      font-size: 18px;
      span {
        color: #5da4fe;
      }
    }
  }

  .hd-right {
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    i {
      font-size: 20px;
      color: #2f2f2f;
    }
  }
}
.com-list {
  width: 100%;
  margin-top: 46px;
  .banner {
    width: 100%;
    height: 240px;

    img {
      width: 100%;
      height: 240px;
    }
  }
}
.com-content {
  width: 100%;
  height: 280px;
  position: relative;
  background: rgb(255, 255, 255);
  margin-bottom: 10px;

  .txt {
    width: 320px;
    height: 150px;
    margin: 0px auto 10px;
    padding-top: 20px;
    background: rgb(255, 255, 255);
    font-size: 14px;
    p {
      line-height: 1.4;
      // 字体间距
      letter-spacing: 0.5px;
    }
  }
  .title {
    width: 320px;
    font-size: 14px;
    margin: 0 auto;
    text-align: right;
    p {
      padding-bottom: 30px;
      color: #7ab4ff;
    }
  }
  .small-btn {
    width: 320px;
    font-size: 12px;
    margin: 0 auto;
    ul {
      display: flex;
      justify-content: space-around;
      align-items: center;
      li {
        a {
          display: flex;
          flex-direction: column;
          align-items: center;
          i {
            font-size: 18px;
            &:hover {
              color: red;
            }
          }
          span {
            margin-top: 5px;
            font-size: 12px;
          }
          &:hover {
            -webkit-tap-highlight-color: rgb(255, 255, 255);
          }
        }
      }
    }
  }
}
// 相关标签
.com-tag {
  width: 100%;
  height: 94px;
  background: rgb(255, 255, 255);
  margin-bottom: 10px;
  .tag-nav {
    width: 100%;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgb(245, 245, 245);

    .tag-nav-1 {
      margin-left: 15px;
      font-size: 16px;
      padding: 2px 0;
      border-bottom: 3px solid skyblue;
    }
    .tag-right {
      margin-right: 10px;
      color: #ccc;
      .tag-nav-2 {
        height: 100%;
        display: inline-block;
        font-size: 12px;
        height: 29px;
        line-height: 29px;
        vertical-align: middle;
      }
      i {
        font-size: 16px;
      }
    }
  }
  ul {
    width: 100%;
    height: 52px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    li {
      font-size: 12px;
      color: #7ab4ff;
      padding: 5px 15px;
      border: 1px solid #5da4fe;
      border-radius: 20px;
    }
  }
}
//相关专辑
.com-album {
  background: rgb(255, 255, 255);
  margin-bottom: 10px;
  .album-nav {
    width: 100%;
    padding: 10px 0 4px 0;
    border-bottom: 1px solid rgb(245, 245, 245);
    p {
      display: inline-block;
      margin-left: 15px;
      font-size: 16px;
      padding: 2px 0;
      border-bottom: 3px solid skyblue;
    }
  }
  .album-pic {
    ul {
      width: 90%;
      margin: 0 auto;
      height: 140px;
      // display: flex;
      // justify-content: space-around;
      li {
        width: 96px;
        text-align: center;
        height: 140px;
        margin-right: 24px;
        float: left;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        img {
          width: 96px;
          height: 96px;
          border-radius: 10px;
        }
        p {
          font-size: 14px;
          display: -webkit-box;
          width: 96px;
          // text-align: center;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }
      }
      li:last-child {
        margin-right: 0px;
      }
    }
  }
}
//推荐句子
.com-sentence {
  background: rgb(255, 255, 255);
  margin-bottom: 10px;
  .sentence-nav {
    width: 100%;
    padding: 10px 0 4px 0;
    border-bottom: 1px solid rgb(245, 245, 245);
    .sentence-nav-1 {
      display: inline-block;
      margin-left: 15px;
      font-size: 16px;
      padding: 2px 0;
      border-bottom: 3px solid skyblue;
    }
  }
  .sentence-case {
    width: 100%;
    .sentence-nav-2 {
      width: 92%;
      margin: 0 auto;
      height: 50px;
      // line-height: 50px;
      font-size: 14px;
      letter-spacing: 2px;
      line-height: 1.7;
      border-bottom: 1px solid rgb(245, 245, 245); // 多余的变成省略号
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      // 首行缩进
      text-indent: 1.8em;
    }
    .sentence-nav-2:last-child {
      border-bottom: 0px solid rgb(245, 245, 245);
    }
  }
}
//评论区
.com-discuss {
  background: rgb(255, 255, 255);
  margin-bottom: 10px;
  .discuss-nav {
    width: 100%;
    padding: 10px 0 4px 0;
    border-bottom: 1px solid rgb(245, 245, 245);
    .discuss-nav-1 {
      display: inline-block;
      margin-left: 15px;
      font-size: 16px;
      padding: 2px 0;
      border-bottom: 3px solid skyblue;
    }
  }
  // 清除浮动
  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }
  // 用户评论
  .discuss-user {
    // display: flex;
    width: 92%;
    margin: 0 auto;
    padding-top: 12px;
    .user-pic {
      float: left;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
    .user-content {
      float: left;
      width: 85%;
      margin-left: 7px;
      padding-bottom: 5px;
      border-bottom: 1px solid rgb(245, 245, 245);
      p {
        font-size: 16px;
        margin-bottom: 6px;
      }
      .cont-data {
        font-size: 12px;
        height: 16px;
        line-height: 16px;
        color: #ccc;
        margin-bottom: 12px;
        .data {
          color: #ccc;
        }
        .data-right {
          // display: inline-block;
          float: right;

          .num {
          }
          i {
            // font-size: 20px;
          }
        }
      }
      .cont-txt {
        p {
          font-size: 16px;
          letter-spacing: 1.2px;
          line-height: 1.5;
          // 多余的变成省略号
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
    }
  }
  .notxt {
    width: 100%;
    text-align: center;
    margin: 30px auto;
    font-size: 16px;
    color: rgb(147, 147, 147);
  }
}

// 我发表评论
.com-answer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 54px;
  background: #fff;
  //   line-height: 50px;
  position: fixed;
  left: 0;
  bottom: 0;
  input {
    height: 36px;
    width: 270px;
    background: #f6f6f6;
    margin-left: 10px;
    vertical-align: middle;
    font-weight: 600;
    color: #b2b2b2;
    padding: 0 10px;
    box-shadow: none;
    /*聚焦input的蓝色边框*/
    outline: none;
    /*textarea 禁止拖拽*/
    resize: none;
    /*去除边框*/
    border: none;
    //   &:-webkit-input-placeholder{
    //      color: #7ab4ff !important;
    //   }
    border-radius: 5px;
    &:focus {
      // border: 0;
      border-color: rgb(255, 255, 255);
    }
  }
  span {
    font-size: 16px;
    padding: 0 18px;
    font-weight: 400;
  }
}
</style>